<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻轮播图</title>
    <link type="text/css" rel="stylesheet" href="css/index.css">
    <!-- 引入相关插件，也叫依赖-->
    <!--引入vue的依赖，必须在elementui之前引入vue-->
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <style>
        .el-card__header{
            background:linear-gradient(#243949,#517fa4);
            background:linear-gradient(#fff1eb,#ace0f9);
        }
        .el-card__body{
            background:linear-gradient(#243949,#517fa4);
            color: #32CD99;
        }


        body{
            background-image: url("/imgs/newbody.jpeg");
            background-repeat: no-repeat;
        }

        /*新闻精华*/
        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 200px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }

        #newsTitle{
            font-size:20px;
            line-height: 10px;
            text-align: center;
            margin: 20px 0px auto;
        }

        #newsContent{
            line-height: 45px;
        }

        /*热点新闻*/
        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 400px;
        }
    </style>

</head>
<body>
    <div id="app">
    <!--新闻精华-->
        <div>
            <div style="text-align: center;margin: 0 auto;font-size: 35px">
                <h3>新闻精华</h3>
            </div>
            <template>
                <el-carousel :interval="4000" type="card" height="290px">
                    <el-carousel-item v-for="(item,index) in news" :index="index">
                        <div @click="look(item.id)">
                            <h3 class="medium" id="newsTitle">{{ item.newsTitle }}</h3>
                            <h3 class="medium" id="newsContent" v-html="item.newsContent"></h3>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </template>
        </div>
   <!--热点新闻-->
        <div>
            <div style="text-align: center;margin: 0 auto;font-size: 35px">
                <h3>热点新闻</h3>
            </div>
            <div>
                <el-row :gutter="20" >
                    <el-col :span="8" >
                        <el-card class="box-card" >
                            <div slot="header" class="clearfix" style="text-align: center;margin: 0 auto;color: #FF2400;font-size: 23px;" >
                                <span >医院新闻</span>
                            </div>
                            <div  class="text item">
                                    <span v-html="hotNews[0].newsContent"></span>
<!--                                {{hotNews[0].newsContent}}-->
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8" >
                        <el-card class="box-card">
                            <div slot="header" class="clearfix" style="text-align: center;margin: 0 auto;color: #CC3299;font-size: 23px">
                                <span >通知公告</span>
                            </div>
                            <div class="text item">
                                <span v-html="hotNews[1].newsContent"></span>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8" >
                        <el-card class="box-card">
                            <div slot="header" class="clearfix" style="text-align: center;margin: 0 auto; color: #99CC32;font-size: 23px">
                                <span >医疗前沿</span>
                            </div>
                            <div class="text item">
                                <span v-html="hotNews[2].newsContent"></span>
                            </div>
                        </el-card>
                    </el-col>

                </el-row>
                </div>
        </div>
    </div>
</body>
<script>
    let vue = new Vue({
        el:"#app",
        data:{
            //新闻精华的参数对象
            news:[],
            //热点新闻里面的新闻类别对象
            newsKind:{},
            //查看热点新闻
            hotNews:[],
        },
        created(){
            this.viewNews();
            this.queryHotNews()
        },
        methods:{
            //查看新闻
            viewNews(){
                axios.post("news/lookNewsUppid").then(resp=>{
                    this.news = resp.data.data
                })
            },

            //点击查看新闻具体内容
            look(index){
                console.log(index)
                window.location ="newsContent.html?id="+index
            },

            //查看热点新闻
            queryHotNews(){
                axios.post("news/queryNewsClick").then(resp=>{
                    this.hotNews = resp.data.data
                    console.log(this.hotNews)
                })
            }

        }
    });
</script>
</html>